<template>
  <div>
    <!-- <div v-for="(group, groupIndex) in params.data.groupData" :key="groupIndex">{{ group }}</div> -->

    <el-popover placement="bottom" trigger="hover">
      <span slot="reference" class="cursor-pointer el-button--text" @click="handleClick">[ {{ params.data.groupData[0] }} .. ]</span>
      <div class="popover-content">
        <div>[</div>
        <div class="group-wrapper pl-4">
          <div v-for="(group, groupIndex) in params.data.groupData" :key="groupIndex" class="group">
            <div>[</div>
            <div class="numbers">
              <div v-for="(num, numIndex) in group" :key="numIndex" class="number-item">{{ num }}{{ numIndex !== group.length - 1 ? ', ' : '' }}</div>
            </div>
            <div>]</div>
          </div>
        </div>
        <div>]</div>

      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick() {
      const data = this.params.data.groupData
      navigator.clipboard.writeText(JSON.stringify(data, null, 4))
      this.$message.success('复制成功')
    }
  }
}
</script>

<style scoped>
.popover-content {
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Space between groups */
}

.group {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between group brackets and numbers */
}

.numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Space between numbers */
}

.number-item {
  display: inline-block;
  width: 20px; /* Fixed width for each number */
  text-align: center;
}
</style>
